<!-- Sidebar -->
<div class="main-section">
    <h1 class="main-section__title">Text field</h1>

    <p class="main-section__intro">
        <code>lx-text-field</code> is directive that create an <code>input text</code> element or a <code>textarea</code> element according to the transcluded element.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/text-field/includes/basic.html" lx-js-path="/js/text-field/demo/demo-text-field_controller.js"></lx-component>
    <lx-component lx-title="Fixed label" lx-path="/includes/modules/text-field/includes/fixed-label.html" lx-js-path="/js/text-field/demo/demo-text-field_controller.js"></lx-component>
    <lx-component lx-title="Textarea" lx-path="/includes/modules/text-field/includes/textarea.html" lx-js-path="/js/text-field/demo/demo-text-field_controller.js"></lx-component>
    <lx-component lx-title="States" lx-path="/includes/modules/text-field/includes/state.html" lx-js-path="/js/text-field/demo/demo-text-field_controller.js"></lx-component>
    <lx-component lx-title="Theme" lx-path="/includes/modules/text-field/includes/theme.html" lx-js-path="/js/text-field/demo/demo-text-field_controller.js"></lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-allow-clear</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Add a button to clear the input model.</td>
                </tr>
                <tr>
                    <td>lx-error</td>
                    <td><code>boolean</code></td>
                    <td></td>
                    <td>Set red error style.</td>
                </tr>
                <tr>
                    <td>lx-has-placeholder</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>
                        Indicates if the transcluded text input has a placeholder. The label of the field will then always be on top of the field.<br />
                        This is incompatible with the 'lx-fixed-label' parameter and the label will always stay on top, no matter what.
                    </td>
                </tr>
                <tr>
                    <td>lx-fixed-label</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Input label will act like a classic placeholder.</td>
                </tr>
                <tr>
                    <td>lx-focus</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Indicates if the input should be focused or not.</td>
                </tr>
                <tr>
                    <td>lx-icon</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Add an icon next to the input. Input must have a fixed label in this case.</td>
                </tr>
                <tr>
                    <td>lx-label*</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>The input label displayed as a placeholder.</td>
                </tr>
                <tr>
                    <td>lx-theme</td>
                    <td><code>string</code></td>
                    <td><code>light</code></td>
                    <td>Set this option to dark if inputs are displayed into a dark box. Options: <code>light</code>, <code>dark</code></td>
                </tr>
                <tr>
                    <td>lx-valid</td>
                    <td><code>boolean</code></td>
                    <td></td>
                    <td>Set green valid style.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>
</div>
